<template>
  <BaseCard title="在线机构占比">
    <div class="chart-wrap">
      <PieChart :dataSource="dataSource" />
    </div>
  </BaseCard>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echarts from 'echarts';
import * as Ajax from '@/api/dashboard';
export default {
  components: {
    PieChart: () => import('./PieChart.vue'),
  },
  data() {
    return {
      dataSource: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    getChart() {
      const _this = this;
      const myCharts = echarts.init(this.$refs.myCharts);
      const options = {
        tooltip: {
          formatter: function (params) {
            return params.name + '：' + params.percent + ' %';
          },
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 0,
          x: 'center',
          data: this.dataList.map((it) => it.name),
        },
        series: [{
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['32%', '64%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return _this.colorList[params.dataIndex];
              },
            },
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12],
              },
              a: {
                padding: [-30, 15, -20, 15],
              },
            },
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1,
              },
            },
          },
          data: this.dataList,
        }],
      };
      myCharts.setOption(options);
    },
    initData(time) {
      Ajax.getPageInfo5(time).then(({ success, data }) => {
        if (success) {
          const { nationwideInstitution, cityInstitution } = data;
          this.dataSource = [
            {
              name: '全国机构',
              value: nationwideInstitution || 0,
            },
            {
              name: '城市机构',
              value: cityInstitution || 0,
            },
          ];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-wrap {
  height: 200px;
}
</style>
